I'm building a strange div shaped structure and I need a hint to resolve a clicking problem.

This is a jsfiddle to show you the issue. The structure for each element is:

    <div class="views-row">
       <div class="diamonds-container">  
          CONTENT
       </div>
   </div>

I have a onclick() event on .diamonds-container but the .views-row div of the next element [with red or blue background..] go over the container and stop the click event on it.

I tryed to play with the z-index but I didn't have the expected result.

How can I achieve this structure with a correct click event on diamonds-containers ?

I think I can track the .views-row click with javascript and trigger manually a click on the previous diamonds-container but this will be my final option.

How can I achieve this without javascript?